<!DOCTYPE html>
<html lang="en" xmlns:v-fo="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=ddevice-width,initial-scale=1">
  <title>CP</title>
  <script src="vue.js"></script>
</head>
<body>
<div>
  <div class="cat" id="app">
  <div class="catP1" v-for="">
    <h1>{{msg}}</h1>
    <input v-model="msg">
    <h2>{{add}}</h2>
    <br>
    <!--        <button v-if="btn" >自营</button>-->
    <button  v-on:click="onAdd">自增</button>
    <ol>
      <!--            <todo :todo="todo内容":name="名字"></todo>-->
      <todo v-for="todo in todos":text="todo"></todo>
    </ol>
    <!--        <span v-for:title="tim">-->
    <!--    鼠标悬停几秒钟查看此处动态绑定的提示信息！-->
    <!--  </span>-->

  </div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
  Vue.component('todo',{
    props:['text'],
    template:'<li>{{text.text}-{{text.plan}}}</li>'
  })
  var app=new Vue({
    el:'#app',
    data:{
      btn:true,
      add:0,
      msg:'Hello Vue',
      time:'页面加载'+new Date().toLocaleDateString(),
      todos:[
        {text:'学习 JavaScript',plan:1},
        {text:'学习 Vue',plan:2},
        {text:'学习 整个项目',plan:3},
      ]
    },
    methods:{
      onAdd:function (){
        this.add +=1
        console.log('点击事件')
      }
    }
  })
  new Vue()
  new Vue()
  console.log(Vue)
</script>
</html>